<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>弹性布局</title>
		<style>

			* {
				padding: 0;
				margin: 0;
			}

			.box {
				width: 600px;
				height: 600px;
				border: 5px solid black;
				margin: 0 auto;

				/* 
					让元素成为一个弹性容器
					flex: 元素以块元素的特征展示;
					inline-flex: 元素可以同排显示, 换行被解析;
					子元素的float, clear, vertical-align会失效
				 */
				display: flex;
				
				/* 
					主轴方向 
					row: 从左到右;
					row-reverse: 从右向左;
					column: 从上到下;
					column-reverse: 从下到上;
				*/
				/*flex-direction: column;*/

				/*
					nowrap: items大小超过了主轴的长度不换行;
					wrap: 换行;
					wrap-reverse: 换行并且item从交叉轴的终点位置开始排列;
			    */
				/*flex-wrap: wrap;*/
				
				/* 简写形式 */
				/*flex-flow: row wrap-reverse;*/

				
				/* 
					item在主轴上的排列方式 
					flex-start: item沿着主轴的开始位置排列;
					flex-end: item依次排列在主轴的结束位置;
					center: item排列在主轴的中间;
					space-around: item左右间距相等;
					space-between: 两端对齐(每两个item之间的间隔相等);
				*/
				justify-content: center;
				
				/*
					items沿着交叉轴的排列方式
					flex-start: item在交叉轴的起点位置;
					flex-end: item在交叉轴的终点位置;
					center: item在交叉轴的中间;
					baseline: 基线对齐;
					stretch: 如果item不设置高度, 会被拉伸;
				*/
				/*align-items: center;*/
				
				/*
					多条主轴沿着交叉轴方向排布方式(两条或两条以上主轴有效果),
					值跟justify-content一样
				*/
				/*align-content: center;*/
			}


			.box>div {
				width: 60px;
				height: 60px;
				background-color: red;
				/* 倒圆角 */
				border-radius: 50%;
				/* 文本居中 */
				text-align: center;
				/* 行高 */
				line-height: 60px;

				/* 字体大小 */
				font-size: 30px;
				/*float: right;*/
				/*margin: 10px;*/

				color: white;
				/*order: 5;*/
			}

			.box>div:first-child {
				/*height: 80px;
				line-height: 80px;
				font-size: 50px;*/

				/* order: 顺序, 值越大越靠后; */
				/*order: -1;*/

				/* 

					能否被放大, 值是占用剩余空间的比例, 默认值0
				 */
				/*flex-grow: 2;*/
				/*width: 400px;*/
				
				/*
					能否被压缩, 值是剩余空间压缩所占的比例, 默认值是1
				*/
				/*flex-shrink: 2;*/
				
				/*
					item的基础尺寸, 剩余空间是按照该值进行计算的, 默认值auto和给元素设置的width或者height一致
				*/
				/*flex-basis: 300px;*/

				/*
					简写形式
					flex-grow flex-shrink flex-basis
				*/
				flex: 1 1 auto;

			}

			.box>div:nth-child(2) {
				/*order: -2;*/
				/*flex-grow: 1;*/
				/*width: 400px;*/
				/*flex-shrink: 1;*/
			}

			.box>div:nth-child(3) {
				/* 

					item沿着交叉轴的排布方式
					flex-start, flex-end, center, baseline, stretch
				 */
				 /*height: auto;*/
				/*align-self: stretch;*/
			}


		</style>
	</head>
	<body>

		<div class="box">
			
			
			<div>1</div>
			<div>2</div>
			<!-- <div>3</div>
			<div>4</div>
			<div>5</div> -->

			<!-- <div>6</div>
			<div>7</div>
			<div>8</div>
			<div>9</div>
			<div>10</div> -->
			<!-- <div>11</div>
			<div>12</div>
			<div>13</div>
			<div>14</div>
			<div>15</div> -->


		</div>
		<!-- <div class="box">
			
			<div>1</div>
			<div>2</div>
			<div>3</div>
			<div>4</div>
			<div>5</div>

		</div> -->
		
	</body>
</html>